<!--
 * Tencent is pleased to support the open source community by making BK-JOB生物智算平台 available.
 *
 * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
 *
 * BK-JOB生物智算平台 is licensed under the MIT License.
 *
 * License for BK-JOB生物智算平台:
 *
 *
 * Terms of the MIT License:
 * ---------------------------------------------------
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
 * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
 * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
 * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
 * the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
 * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
 * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
 * IN THE SOFTWARE.
-->

<template>
  <div>
    <jb-form-item :label="label" :property="field" required :rules="rules">
      <div class="form-item-content" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
        <jb-input ref="input" :maxlength="maxlength" :placeholder="placeholder"
          :value="isFocused ? showVal : formData[field]" @change="handleChange" @on-focus="handlerFocus"
          @on-blur="handlerBlur" />
      </div>
    </jb-form-item>
    <div style="display: none;">
      <div ref="tips" @mouseenter="handleTipsMouseenter" @mouseleave="handleMouseleave">
        格式： 组织名_用户名_${步骤名称}_时间戳；<br>
        输入内容为步骤名称；
      </div>
    </div>
  </div>
</template>
<script>
import JbInput from '@components/jb-input';
import { getUserInfor } from '@utils/assist';
console.log(getUserInfor())
import Tippy from 'bk-magic-vue/lib/utils/tippy';
import I18n from '@/i18n';

export default {
  components: {
    JbInput,
  },
  props: {
    field: {
      type: String,
      required: true,
    },
    formData: {
      type: Object,
      default: () => ({}),
    },
    label: {
      type: String,
      default: I18n.t('步骤名称'),
    },
    placeholder: {
      type: String,
      default: I18n.t('请输入步骤名称'),
    },
  },
  data() {
    return {
      prefix: "",
      suffix: "",
      showVal: "",
      isFocused: false,
      maxlength: 80
    }
  },
  created() {
    this.rules = [
      {
        required: true,
        message: `${this.label}${I18n.t('必填')}`,
        trigger: 'blur',
      },
      // {
      //   validator: value => {
      //     const splitVal = this.formData[this.field].split("_");
      //     return splitVal.length == 4
      //   },
      //   message: "请输入步骤名称",
      //   trigger: 'blur',
      // },
      {
        validator: value => /^[^\\|/:*<>"?]{1,80}$/.test(value),
        message: `${this.label}${I18n.t('不允许包含')}\\ | / : * < > " ?`,
        trigger: 'blur',
      },
    ];

    const { baseInfo } = this.formData;
    const { scopeName, modelByUser, modelByName, timestamp } = baseInfo || {};
    this.showVal = `${modelByName}`;
    this.prefix = `${scopeName}_${modelByUser}_`;
    this.suffix = `_${timestamp}`;

  },
  beforeDestroy() {
    if (this.popperInstance) {
      this.popperInstance.hide();
      this.popperInstance.destroy();
    }
  },
  methods: {
    handleChange(value) {
      this.showVal = value
      if (value == '') this.suffix = this.suffix.replace('_', '');
      this.$emit('on-change', this.field, `${this.prefix}${this.showVal}${this.suffix}`);
    },
    handlerBlur(value) {
      this.showVal = value
      this.isFocused = false;
      this.maxlength = 60;
    },
    handlerFocus() {
      this.isFocused = true;
      this.maxlength -= `${this.prefix}${this.suffix}`.length || 0;
    },
    /**
     * @desc 显示tips
     */
    showTips() {
      if (!this.popperInstance) {
        this.popperInstance = Tippy(this.$refs.input.$el, {
          arrow: true,
          placement: 'right',
          trigger: 'manual',
          theme: 'light',
          interactive: true,
          hideOnClick: false,
          animation: 'slide-toggle',
          lazy: false,
          size: 'small',
          boundary: 'window',
          distance: 20,
          zIndex: window.__bk_zIndex_manager.nextZIndex(), // eslint-disable-line no-underscore-dangle
        });
        this.popperInstance.setContent(this.$refs.tips);
      }

      this.popperInstance.show();
    },
    /**
     * @desc 隐藏tips
     */
    hideTips() {
      if (this.isMouseenter) {
        return;
      }
      this.popperInstance.hide();
    },
    /**
     * @desc 鼠标移入的时候显示tips
     */
    handleMouseenter() {
      clearTimeout(this.hideTimer);
      this.showTips();
    },
    /**
     * @desc 鼠标移出的时候隐藏tips
     */
    handleMouseleave() {
      this.isMouseenter = false;
      this.hideTimer = setTimeout(() => {
        if (!this.isInputFocus) {
          this.hideTips();
        }
      }, 100);
    },
    /**
     * @desc 获得焦点是显示ips
     */
    handleInputFocus() {
      this.isInputFocus = true;
      this.showTips();
    },
    /**
     * @desc 失去焦点是显示ips
     */
    handleInputBlur() {
      this.isInputFocus = false;
      this.hideTips();
    },
    /**
     * @desc 鼠标在tips内部时取消隐藏tips定时器
     */
    handleTipsMouseenter() {
      clearTimeout(this.hideTimer);
      this.isMouseenter = true;
    },
  }
};
</script>
